<!-- The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. -->
<template>
    <div class="min-h-screen bg-gray-50">
        <!-- 顶部导航栏 -->
        <Header />
        <!-- 左侧导航栏 -->
        <aside class="fixed left-0 top-16 bottom-0 w-64 bg-gray-800 text-white z-10 overflow-y-auto">
            <nav class="py-4">
                <div v-for="(menu, index) in mainMenus" :key="index" class="mb-1">
                    <div class="flex items-center px-6 py-3 cursor-pointer hover:bg-gray-700"
                        :class="{ 'bg-blue-700': menu.active }" @click="toggleMenu(index)">
                        <i :class="menu.icon + ' mr-3 w-5 text-center'"></i>
                        <span>{{ menu.name }}</span>
                        <i class="fas fa-chevron-down ml-auto text-xs transition-transform duration-200"
                            :class="{ 'transform rotate-180': menu.expanded }"></i>
                    </div>
                    <div v-if="menu.expanded" class="bg-gray-900">
                        <div v-for="(submenu, subIndex) in menu.subMenus" :key="subIndex"
                            class="flex items-center px-10 py-2 cursor-pointer hover:bg-gray-700"
                            :class="{ 'text-blue-400': submenu.active }" @click="selectSubmenu(index, subIndex)">
                            <a v-if="submenu.link" :href="submenu.link" data-readdy="true" class="text-sm w-full">{{
                                submenu.name }}</a>
                            <span v-else class="text-sm">{{ submenu.name }}</span>
                        </div>
                    </div>
                </div>
            </nav>
        </aside>
        <!-- 主内容区域 -->
        <main class="pt-16 pl-64">
            <div class="container mx-auto p-6">
                <!-- 面包屑导航 -->
                <div class="flex items-center text-sm mb-4 text-gray-500">
                    <a href="https://readdy.ai/home/2aadf73d-355f-4962-b7ac-b983b1785a7f/58a44f43-cbcb-4435-884f-3eace61d79b5"
                        data-readdy="true" class="hover:text-blue-600 cursor-pointer">首页</a>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span>在线巡查</span>
                    <i class="fas fa-chevron-right mx-2 text-xs"></i>
                    <span class="text-blue-600">预警信息列表</span>
                </div>
                <!-- 预警信息列表卡片 -->
                <div class="bg-white rounded-lg shadow-sm p-6 mb-6">
                    <div class="flex justify-between items-center mb-6">
                        <h2 class="text-xl font-bold text-gray-800">预警信息列表</h2>
                        <div class="text-sm text-gray-500">
                            <span>更新于 {{ currentTime }}</span>
                        </div>
                    </div>
                    <!-- 筛选区域 -->
                    <div class="bg-gray-50 p-4 rounded-lg mb-6">
                        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                            <!-- 预警级别筛选 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">预警级别</label>
                                <div class="relative">
                                    <select v-model="filters.level"
                                        class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
                                        <option value="">全部</option>
                                        <option value="high">高危</option>
                                        <option value="medium">中危</option>
                                        <option value="low">低危</option>
                                    </select>
                                    <div
                                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                        <i class="fas fa-chevron-down text-xs"></i>
                                    </div>
                                </div>
                            </div>
                            <!-- 时间范围筛选 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">时间范围</label>
                                <div class="flex space-x-2">
                                    <div class="relative flex-1">
                                        <input type="date" v-model="filters.startDate"
                                            class="block w-full pl-3 pr-10 py-2 text-sm border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 rounded-md">
                                    </div>
                                    <span class="flex items-center text-gray-500">至</span>
                                    <div class="relative flex-1">
                                        <input type="date" v-model="filters.endDate"
                                            class="block w-full pl-3 pr-10 py-2 text-sm border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 rounded-md">
                                    </div>
                                </div>
                            </div>
                            <!-- 处理状态筛选 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">处理状态</label>
                                <div class="relative">
                                    <select v-model="filters.status"
                                        class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
                                        <option value="">全部</option>
                                        <option value="pending">未处理</option>
                                        <option value="processing">处理中</option>
                                        <option value="resolved">已处理</option>
                                    </select>
                                    <div
                                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                        <i class="fas fa-chevron-down text-xs"></i>
                                    </div>
                                </div>
                            </div>
                            <!-- 搜索框 -->
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">关键词搜索</label>
                                <div class="relative">
                                    <input type="text" v-model="filters.keyword" placeholder="搜索预警标题"
                                        class="block w-full pl-10 pr-3 py-2 border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
                                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                        <i class="fas fa-search text-gray-400"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 第二行筛选 -->
                        <div class="flex justify-between mt-4">
                            <!-- 排序选项 -->
                            <div class="flex items-center">
                                <span class="text-sm text-gray-700 mr-2">排序方式：</span>
                                <div class="relative">
                                    <select v-model="sortOption"
                                        class="pl-3 pr-8 py-1 text-sm border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 rounded-md">
                                        <option value="latest">最新发布</option>
                                        <option value="level">级别优先</option>
                                    </select>
                                    <div
                                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                        <i class="fas fa-chevron-down text-xs"></i>
                                    </div>
                                </div>
                            </div>
  
                        </div>
                    </div>
                    <!-- 预警信息表格 -->
                    <div class="overflow-x-auto mb-6">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col"
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        预警标题</th>
                                    <th scope="col"
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        发布时间</th>
                                    <th scope="col"
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        预警级别</th>
                                    <th scope="col"
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        处理状态</th>
                                    <th scope="col"
                                        class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                        操作</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                <tr v-for="(alert, index) in displayedAlerts" :key="index" class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm font-medium text-gray-900">{{ alert.title }}</div>
                                        <div class="text-xs text-gray-500">{{ alert.source }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <div class="text-sm text-gray-900">{{ alert.time }}</div>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                            :class="getLevelClass(alert.level)">
                                            {{ getLevelText(alert.level) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                            :class="getStatusClass(alert.status)">
                                            {{ getStatusText(alert.status) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                                        <div class="flex space-x-2">
                                            <button @click="viewDetail(alert)"
                                                class="text-blue-600 hover:text-blue-900 !rounded-button whitespace-nowrap cursor-pointer">
                                                <i class="fas fa-eye mr-1"></i> 查看详情
                                            </button>
                                            <button @click="handleAlert(alert)"
                                                class="text-green-600 hover:text-green-900 !rounded-button whitespace-nowrap cursor-pointer"
                                                :disabled="alert.status === 'resolved'">
                                                <i class="fas fa-check-circle mr-1"></i> 处理
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- 分页控制 -->
                    <div class="flex items-center justify-between border-t border-gray-200 pt-4">
                        <div class="flex items-center">
                            <span class="text-sm text-gray-700 mr-2">每页显示</span>
                            <div class="relative">
                                <select v-model="pageSize" @change="updatePagination"
                                    class="pl-3 pr-8 py-1 text-sm border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 rounded-md">
                                    <option value="10">10</option>
                                    <option value="20">20</option>
                                    <option value="50">50</option>
                                </select>
                                <div
                                    class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                    <i class="fas fa-chevron-down text-xs"></i>
                                </div>
                            </div>
                            <span class="ml-4 text-sm text-gray-700">共 {{ totalAlerts }} 条</span>
                        </div>
                        <div class="flex justify-between sm:justify-end">
                            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px"
                                aria-label="Pagination">
                                <button @click="prevPage" :disabled="currentPage === 1"
                                    class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed !rounded-button whitespace-nowrap cursor-pointer">
                                    <i class="fas fa-chevron-left text-xs"></i>
                                </button>
                                <span v-for="page in displayedPages" :key="page"
                                    class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium"
                                    :class="page === currentPage ? 'bg-blue-50 text-blue-600 z-10' : 'text-gray-500 hover:bg-gray-50 cursor-pointer'"
                                    @click="goToPage(page)">
                                    {{ page }}
                                </span>
                                <button @click="nextPage" :disabled="currentPage === totalPages"
                                    class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed !rounded-button whitespace-nowrap cursor-pointer">
                                    <i class="fas fa-chevron-right text-xs"></i>
                                </button>
                            </nav>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <!-- 处理弹窗 -->
        <div v-if="showProcessModal"
            class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 flex items-center justify-center">
            <div class="relative bg-white rounded-lg shadow-xl mx-auto p-6 max-w-md w-full">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium text-gray-900">处理预警</h3>
                    <button @click="showProcessModal = false"
                        class="text-gray-400 hover:text-gray-500 !rounded-button whitespace-nowrap cursor-pointer">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="mb-4">
                    <div class="text-sm text-gray-500 mb-2">预警信息</div>
                    <div class="text-base font-medium text-gray-900 mb-4">{{ selectedAlert.title }}</div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">处理状态</label>
                        <div class="relative">
                            <select v-model="processForm.status"
                                class="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
                                <option value="processing">处理中</option>
                                <option value="resolved">已处理</option>
                            </select>
                            <div
                                class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
                                <i class="fas fa-chevron-down text-xs"></i>
                            </div>
                        </div>
                    </div>
                    <div class="mb-4">
                        <label class="block text-sm font-medium text-gray-700 mb-1">处理说明</label>
                        <textarea v-model="processForm.comment" rows="4"
                            class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"></textarea>
                    </div>
                </div>
                <div class="flex justify-end space-x-3">
                    <button @click="showProcessModal = false"
                        class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 !rounded-button whitespace-nowrap cursor-pointer">
                        取消
                    </button>
                    <button @click="submitProcess"
                        class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 !rounded-button whitespace-nowrap cursor-pointer">
                        确认
                    </button>
                </div>
            </div>
        </div>
        <!-- 详情弹窗 -->
        <div v-if="showDetailModal"
            class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full z-50 flex items-center justify-center">
            <div class="relative bg-white rounded-lg shadow-xl mx-auto p-6 max-w-2xl w-full">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="text-lg font-medium text-gray-900">预警详情</h3>
                    <button @click="showDetailModal = false"
                        class="text-gray-400 hover:text-gray-500 !rounded-button whitespace-nowrap cursor-pointer">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="mb-6">
                    <div class="bg-gray-50 p-4 rounded-lg mb-4">
                        <div class="flex justify-between mb-2">
                            <h4 class="text-base font-medium text-gray-900">{{ selectedAlert.title }}</h4>
                            <span class="px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full"
                                :class="getLevelClass(selectedAlert.level)">
                                {{ getLevelText(selectedAlert.level) }}
                            </span>
                        </div>
                        <div class="grid grid-cols-2 gap-4 text-sm">
                            <div>
                                <span class="text-gray-500">发布时间：</span>
                                <span class="text-gray-900">{{ selectedAlert.time }}</span>
                            </div>
                            <div>
                                <span class="text-gray-500">来源：</span>
                                <span class="text-gray-900">{{ selectedAlert.source }}</span>
                            </div>
                            <div>
                                <span class="text-gray-500">处理状态：</span>
                                <span class="px-2 py-0.5 inline-flex text-xs leading-5 font-semibold rounded-full"
                                    :class="getStatusClass(selectedAlert.status)">
                                    {{ getStatusText(selectedAlert.status) }}
                                </span>
                            </div>
                            <div>
                                <span class="text-gray-500">责任人：</span>
                                <span class="text-gray-900">{{ selectedAlert.responsible || '未分配' }}</span>
                            </div>
                        </div>
                    </div>
                    <div class="mb-4">
                        <h4 class="text-sm font-medium text-gray-700 mb-2">预警详细内容</h4>
                        <div class="text-sm text-gray-600 bg-white border border-gray-200 rounded-md p-3">
                            {{ selectedAlert.description || '暂无详细描述' }}
                        </div>
                    </div>
                    <div v-if="selectedAlert.images && selectedAlert.images.length > 0" class="mb-4">
                        <h4 class="text-sm font-medium text-gray-700 mb-2">相关图片</h4>
                        <div class="grid grid-cols-3 gap-2">
                            <div v-for="(image, idx) in selectedAlert.images" :key="idx"
                                class="h-24 bg-gray-100 rounded-md overflow-hidden">
                                <img :src="image" alt="预警相关图片" class="w-full h-full object-cover object-top">
                            </div>
                        </div>
                    </div>
                    <div v-if="selectedAlert.processHistory && selectedAlert.processHistory.length > 0">
                        <h4 class="text-sm font-medium text-gray-700 mb-2">处理记录</h4>
                        <div class="border border-gray-200 rounded-md overflow-hidden">
                            <div class="bg-gray-50 px-4 py-2 border-b border-gray-200">
                                <div class="grid grid-cols-4 text-xs font-medium text-gray-500">
                                    <div>处理时间</div>
                                    <div>处理人</div>
                                    <div>处理状态</div>
                                    <div>处理说明</div>
                                </div>
                            </div>
                            <div class="divide-y divide-gray-200">
                                <div v-for="(record, idx) in selectedAlert.processHistory" :key="idx" class="px-4 py-3">
                                    <div class="grid grid-cols-4 text-sm">
                                        <div class="text-gray-900">{{ record.time }}</div>
                                        <div class="text-gray-900">{{ record.operator }}</div>
                                        <div>
                                            <span
                                                class="px-2 py-0.5 inline-flex text-xs leading-5 font-semibold rounded-full"
                                                :class="getStatusClass(record.status)">
                                                {{ getStatusText(record.status) }}
                                            </span>
                                        </div>
                                        <div class="text-gray-600">{{ record.comment }}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex justify-end space-x-3">
                    <button @click="showDetailModal = false"
                        class="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 !rounded-button whitespace-nowrap cursor-pointer">
                        关闭
                    </button>
                    <button v-if="selectedAlert.status !== 'resolved'" @click="handleFromDetail"
                        class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 !rounded-button whitespace-nowrap cursor-pointer">
                        处理此预警
                    </button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Header from '../components/Header.vue';
export default {
    components: {
    Header,
  },
    data() {
        return {
            currentTime: '',
            mainMenus: [
                {
                    name: '监测报警',
                    icon: 'fas fa-bell',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '数据汇聚功能', active: false, link: '/data-aggregation' },
                        { name: '监测指标统计', active: false, link: '/monitoring-indicators' },
                        { name: '区域化展示', active: false, link: '/regional-display' }
                    ]
                },
                {
                    name: '风险研判',
                    icon: 'fas fa-exclamation-triangle',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '智能风险评估', active: false, link: '/intelligent-risk-assessment' },
                        { name: '预警信息推送', active: false, link: '/risk-warning-push' },
                        { name: '风险管理与分析', active: false, link: '/risk-analysis' },
                        { name: '重点风险提示', active: false, link: '/focus' },
                    ]
                },
                {
                    name: '在线巡查',
                    icon: 'fas fa-search',
                    expanded: true,
                    active: true,
                    subMenus: [
                        { name: '企业信息汇总', active: false, link: '/summary-information' },
                        { name: '巡查功能', active: false, link: '/patrol' },
                        { name: '检索功能', active:false , link: 'search' },
                        { name: '一屏汇聚展示', active: true, link: '/screen-display' }
                    ]
                },
                {
                    name: '综合分析',
                    icon: 'fas fa-chart-line',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '联网与设备分析', active: false, link: '/equipment' },
                        { name: '应用情况分析', active: false, link: '/application' },
                        { name: '数据质量分析', active: false, link: '/data-quality' },
                        { name: '定期专题报告', active: false, link: 'report' }
                    ]
                },
                {
                    name: '系统管理',
                    icon: 'fas fa-cog',
                    expanded: false,
                    active: false,
                    subMenus: [
                        { name: '用户权限管理', active: false, link: 'user-permission' },
                        { name: '系统配置管理', active: false, link: 'system-manage' },
                        { name: '数据管理', active: false, link: 'data-manage' },
                        { name: '系统监控与维护', active: false, link: 'monitoring' }
                    ]
                }
            ],
            // 筛选条件
            filters: {
                level: '',
                startDate: '',
                endDate: '',
                status: '',
                keyword: ''
            },
            // 排序选项
            sortOption: 'latest',
            // 分页
            currentPage: 1,
            pageSize: 10,
            // 弹窗控制
            showProcessModal: false,
            showDetailModal: false,
            // 选中的预警
            selectedAlert: {},
            // 处理表单
            processForm: {
                status: 'processing',
                comment: ''
            },
            // 预警数据
            alerts: [
                {
                    id: 1,
                    title: '3号高炉煤气管道压力波动异常',
                    source: '自动监测系统',
                    time: '2025-07-08 15:22:45',
                    level: 'high',
                    status: 'pending',
                    responsible: '张工程师',
                    description: '3号高炉煤气管道压力在过去30分钟内出现异常波动，波动范围为0.78-0.85 MPa，超出正常运行范围。可能存在管道泄漏或阀门故障，建议立即检查。',
                    images: [
                        'https://readdy.ai/api/search-image?query=Industrial%20steel%20factory%20pipeline%20system%20with%20visible%20pressure%20gauges%20showing%20abnormal%20readings.%20The%20image%20shows%20detailed%20metal%20pipes%20with%20valves%20and%20joints%20in%20a%20factory%20environment%20with%20warning%20indicators%20lit.%20The%20scene%20has%20industrial%20lighting%20with%20a%20technical%20atmosphere&width=400&height=300&seq=1&orientation=landscape',
                        'https://readdy.ai/api/search-image?query=Close-up%20of%20an%20industrial%20pressure%20gauge%20showing%20high%20pressure%20reading%20in%20the%20red%20zone.%20The%20gauge%20is%20mounted%20on%20a%20metal%20pipe%20system%20in%20a%20steel%20manufacturing%20facility.%20The%20image%20has%20clear%20detail%20of%20the%20measurement%20dial%20with%20technical%20precision&width=400&height=300&seq=2&orientation=landscape',
                        'https://readdy.ai/api/search-image?query=Control%20room%20monitoring%20screen%20showing%20abnormal%20pressure%20fluctuations%20in%20a%20blast%20furnace%20system.%20The%20display%20shows%20graphs%20with%20irregular%20patterns%20and%20warning%20alerts.%20The%20control%20panel%20has%20multiple%20screens%20with%20technical%20data%20in%20a%20modern%20industrial%20monitoring%20center&width=400&height=300&seq=3&orientation=landscape'
                    ],
                    processHistory: []
                },
                {
                    id: 2,
                    title: '2号转炉除尘设备效率下降',
                    source: '环保监测系统',
                    time: '2025-07-08 15:05:32',
                    level: 'medium',
                    status: 'pending',
                    responsible: '李主管',
                    description: '2号转炉除尘设备效率持续下降，当前除尘效率为85%，低于正常运行标准（≥95%）。排放浓度接近预警值，如不及时处理可能导致环保超标。',
                    images: [
                        'https://readdy.ai/api/search-image?query=Industrial%20dust%20collection%20system%20in%20a%20steel%20plant%20with%20visible%20dust%20emissions.%20The%20large%20metal%20equipment%20shows%20signs%20of%20reduced%20efficiency%20with%20some%20dust%20escaping%20collection.%20The%20scene%20is%20set%20in%20a%20converter%20area%20of%20a%20steel%20mill%20with%20industrial%20equipment%20surrounding&width=400&height=300&seq=4&orientation=landscape'
                    ],
                    processHistory: []
                },
                {
                    id: 3,
                    title: '1号连铸机冷却水温度升高',
                    source: '生产监控系统',
                    time: '2025-07-08 14:48:15',
                    level: 'low',
                    status: 'processing',
                    responsible: '王技术员',
                    description: '1号连铸机二次冷却水温度持续升高，当前温度为38°C，接近警戒值40°C。冷却效果下降可能影响铸坯质量，建议检查冷却水循环系统。',
                    images: [],
                    processHistory: [
                        {
                            time: '2025-07-08 15:10:22',
                            operator: '王技术员',
                            status: 'processing',
                            comment: '已安排检修人员检查冷却水循环系统，初步判断可能是水泵效率下降导致。'
                        }
                    ]
                },
                {
                    id: 4,
                    title: '热轧车间安全门控制系统离线',
                    source: '安全监控系统',
                    time: '2025-07-08 14:30:10',
                    level: 'medium',
                    status: 'resolved',
                    responsible: '赵安全员',
                    description: '热轧车间3号安全门控制系统离线，无法远程监控门禁状态。可能影响紧急情况下的安全疏散，需立即恢复系统正常运行。',
                    images: [],
                    processHistory: [
                        {
                            time: '2025-07-08 14:45:18',
                            operator: '赵安全员',
                            status: 'processing',
                            comment: '已通知IT部门和设备维护人员，正在排查故障原因。'
                        },
                        {
                            time: '2025-07-08 15:20:35',
                            operator: '赵安全员',
                            status: 'resolved',
                            comment: '故障已排除，是由于网络交换机故障导致。已更换设备并恢复正常运行。'
                        }
                    ]
                },
                {
                    id: 5,
                    title: '原料堆场粉尘浓度超标',
                    source: '环境监测系统',
                    time: '2025-07-08 13:15:22',
                    level: 'high',
                    status: 'processing',
                    responsible: '周环保',
                    description: '原料堆场PM10浓度持续超标，当前值为0.95mg/m³，超过警戒值0.8mg/m³。可能由于近期降雨减少，扬尘控制措施效果不佳导致。',
                    images: [
                        'https://readdy.ai/api/search-image?query=Aerial%20view%20of%20a%20steel%20plant%20raw%20material%20storage%20yard%20with%20visible%20dust%20emissions.%20The%20large%20outdoor%20storage%20area%20contains%20piles%20of%20iron%20ore%20and%20coal%20with%20dust%20clouds%20forming%20above.%20The%20industrial%20site%20shows%20minimal%20dust%20suppression%20measures%20in%20a%20dry%20environment&width=400&height=300&seq=5&orientation=landscape'
                    ],
                    processHistory: [
                        {
                            time: '2025-07-08 13:30:45',
                            operator: '周环保',
                            status: 'processing',
                            comment: '已增加喷淋频次，安排洒水车增加作业频率。同时检查除尘设备运行状况。'
                        }
                    ]
                },
                {
                    id: 6,
                    title: '5号高炉炉顶温度异常',
                    source: '生产监控系统',
                    time: '2025-07-08 12:40:18',
                    level: 'high',
                    status: 'pending',
                    responsible: '未分配',
                    description: '5号高炉炉顶温度持续上升，当前温度为320°C，超过正常运行范围（250-300°C）。可能存在炉料分布不均或冷却系统异常。',
                    images: [],
                    processHistory: []
                },
                {
                    id: 7,
                    title: '氧气站压力波动',
                    source: '公用工程监控',
                    time: '2025-07-08 11:25:33',
                    level: 'medium',
                    status: 'resolved',
                    responsible: '刘工程师',
                    description: '氧气站供应压力出现波动，波动范围为0.8-1.2MPa，影响转炉供氧稳定性。需检查调压设备运行状况。',
                    images: [],
                    processHistory: [
                        {
                            time: '2025-07-08 11:40:12',
                            operator: '刘工程师',
                            status: 'processing',
                            comment: '已通知设备部检查调压阀和供氧系统，初步判断可能是调压阀故障。'
                        },
                        {
                            time: '2025-07-08 12:15:28',
                            operator: '刘工程师',
                            status: 'resolved',
                            comment: '已完成调压阀维修，更换了密封件，系统压力已恢复正常。'
                        }
                    ]
                },
                {
                    id: 8,
                    title: '轧钢车间液压系统泄漏',
                    source: '设备监控系统',
                    time: '2025-07-08 10:15:40',
                    level: 'medium',
                    status: 'processing',
                    responsible: '张机械师',
                    description: '轧钢车间2号轧机液压系统发现少量泄漏，当前泄漏点位于主缸连接处，需及时处理防止扩大。',
                    images: [
                        'https://readdy.ai/api/search-image?query=Close-up%20of%20a%20hydraulic%20system%20in%20a%20steel%20rolling%20mill%20with%20visible%20oil%20leakage%20at%20a%20connection%20point.%20The%20image%20shows%20detailed%20hydraulic%20cylinders%20and%20hoses%20with%20oil%20dripping%20from%20a%20joint.%20The%20industrial%20machinery%20is%20large%20scale%20in%20a%20factory%20environment&width=400&height=300&seq=6&orientation=landscape'
                    ],
                    processHistory: [
                        {
                            time: '2025-07-08 10:30:22',
                            operator: '张机械师',
                            status: 'processing',
                            comment: '已安排维修人员准备更换密封件，计划在今日下午生产间隙进行维修。'
                        }
                    ]
                },
                {
                    id: 9,
                    title: '变电所1号变压器温度升高',
                    source: '电气监控系统',
                    time: '2025-07-08 09:20:15',
                    level: 'high',
                    status: 'resolved',
                    responsible: '陈电气工程师',
                    description: '主变电所1号变压器油温升高至75°C，超过正常运行温度（≤65°C）。可能存在负载过大或冷却系统异常。',
                    images: [],
                    processHistory: [
                        {
                            time: '2025-07-08 09:35:40',
                            operator: '陈电气工程师',
                            status: 'processing',
                            comment: '已调整负载分配，部分负荷转移至2号变压器。同时检查冷却风扇运行状况。'
                        },
                        {
                            time: '2025-07-08 10:20:15',
                            operator: '陈电气工程师',
                            status: 'processing',
                            comment: '发现冷却风扇控制器故障，导致风扇未全功率运行。正在更换控制器。'
                        },
                        {
                            time: '2025-07-08 11:05:30',
                            operator: '陈电气工程师',
                            status: 'resolved',
                            comment: '已完成控制器更换，冷却系统恢复正常运行，变压器温度已降至正常范围。'
                        }
                    ]
                },
                {
                    id: 10,
                    title: '废水处理站pH值异常',
                    source: '环保监测系统',
                    time: '2025-07-08 08:45:22',
                    level: 'medium',
                    status: 'resolved',
                    responsible: '林环保工程师',
                    description: '废水处理站出水pH值降至5.8，低于标准范围（6.5-9.0）。可能影响后续处理效果和排放达标情况。',
                    images: [],
                    processHistory: [
                        {
                            time: '2025-07-08 09:00:15',
                            operator: '林环保工程师',
                            status: 'processing',
                            comment: '已增加碱性药剂投加量，同时检查pH在线监测设备是否准确。'
                        },
                        {
                            time: '2025-07-08 09:40:28',
                            operator: '林环保工程师',
                            status: 'resolved',
                            comment: '经检查是pH计校准偏差导致的误报，实际pH值在正常范围内。已重新校准设备。'
                        }
                    ]
                },
                {
                    id: 11,
                    title: '炼钢车间除尘管道振动异常',
                    source: '设备监控系统',
                    time: '2025-07-07 16:30:45',
                    level: 'low',
                    status: 'pending',
                    responsible: '未分配',
                    description: '炼钢车间主除尘管道在高负荷运行时出现异常振动，振动频率高于正常值。可能存在管道支架松动或风机不平衡。',
                    images: [],
                    processHistory: []
                },
                {
                    id: 12,
                    title: '成品库区消防系统压力不足',
                    source: '安全监控系统',
                    time: '2025-07-07 15:20:18',
                    level: 'high',
                    status: 'resolved',
                    responsible: '郑安全主管',
                    description: '成品库区消防系统水压降至0.4MPa，低于设计压力0.6MPa。可能影响火灾应急响应能力，需立即排查原因。',
                    images: [],
                    processHistory: [
                        {
                            time: '2025-07-07 15:35:22',
                            operator: '郑安全主管',
                            status: 'processing',
                            comment: '已通知消防设备维护人员检查消防泵和管网，同时启用备用水源。'
                        },
                        {
                            time: '2025-07-07 16:40:15',
                            operator: '郑安全主管',
                            status: 'resolved',
                            comment: '发现消防水池水位低导致压力不足，已补充水源并恢复正常压力。同时检修了水位监测报警装置。'
                        }
                    ]
                },
                {
                    id: 13,
                    title: '高炉煤气管网压力波动',
                    source: '能源管控中心',
                    time: '2025-07-07 14:15:30',
                    level: 'medium',
                    status: 'processing',
                    responsible: '吴能源工程师',
                    description: '高炉煤气管网压力出现周期性波动，波动范围为5.2-6.8kPa，超出稳定运行范围。可能影响下游用气单位的稳定生产。',
                    images: [],
                    processHistory: [
                        {
                            time: '2025-07-07 14:30:45',
                            operator: '吴能源工程师',
                            status: 'processing',
                            comment: '已调整高炉煤气柜运行参数，增加缓冲能力。同时检查各用气点的用气量变化情况。'
                        }
                    ]
                },
                {
                    id: 14,
                    title: '轧钢加热炉温度分布不均',
                    source: '生产监控系统',
                    time: '2025-07-07 13:10:25',
                    level: 'low',
                    status: 'resolved',
                    responsible: '钱工艺师',
                    description: '1号轧钢加热炉温度分布不均匀，炉内最大温差达到80°C，超过设计值50°C。可能导致坯料加热不均，影响产品质量。',
                    images: [],
                    processHistory: [
                        {
                            time: '2025-07-07 13:25:18',
                            operator: '钱工艺师',
                            status: 'processing',
                            comment: '已调整燃烧器参数，检查温度传感器是否准确。'
                        },
                        {
                            time: '2025-07-07 14:45:30',
                            operator: '钱工艺师',
                            status: 'resolved',
                            comment: '经检查是部分燃烧器喷嘴堵塞导致，已完成清理，温度分布恢复正常。'
                        }
                    ]
                },
                {
                    id: 15,
                    title: '原料场输送机故障',
                    source: '设备监控系统',
                    time: '2025-07-07 11:45:15',
                    level: 'medium',
                    status: 'resolved',
                    responsible: '孙设备工程师',
                    description: '原料场3号皮带输送机出现打滑现象，传送效率下降30%。可能影响高炉配料进度，需及时处理。',
                    images: [],
                    processHistory: [
                        {
                            time: '2025-07-07 12:00:22',
                            operator: '孙设备工程师',
                            status: 'processing',
                            comment: '已安排维修人员检查皮带张紧度和驱动装置，临时启用备用输送线路。'
                        },
                        {
                            time: '2025-07-07 13:30:40',
                            operator: '孙设备工程师',
                            status: 'resolved',
                            comment: '已完成皮带更换和张紧装置调整，输送机恢复正常运行。'
                        }
                    ]
                },
                {
                    id: 16,
                    title: '连铸结晶器水压异常',
                    source: '生产监控系统',
                    time: '2025-07-07 10:30:18',
                    level: 'high',
                    status: 'pending',
                    responsible: '未分配',
                    description: '2号连铸机结晶器冷却水压力波动，当前压力为0.25MPa，低于正常值0.35MPa。可能影响铸坯冷却效果和表面质量。',
                    images: [],
                    processHistory: []
                },
                {
                    id: 17,
                    title: '空压站2号压缩机振动超标',
                    source: '设备监控系统',
                    time: '2025-07-07 09:15:40',
                    level: 'medium',
                    status: 'processing',
                    responsible: '赵机械工程师',
                    description: '空压站2号空压机振动值达到7.2mm/s，超过警戒值6.5mm/s。持续高振动可能导致设备损坏，影响压缩空气供应。',
                    images: [],
                    processHistory: [
                        {
                            time: '2025-07-07 09:30:15',
                            operator: '赵机械工程师',
                            status: 'processing',
                            comment: '已降低空压机负荷，启用备用机组。安排检修人员准备进行设备检查。'
                        }
                    ]
                },
                {
                    id: 18,
                    title: '炼铁原料成分波动',
                    source: '质量监控系统',
                    time: '2025-07-07 08:20:30',
                    level: 'low',
                    status: 'resolved',
                    responsible: '杨质量工程师',
                    description: '最近一批铁矿石硅含量达到8.5%，高于标准值7%。可能影响高炉冶炼过程和铁水质量，需调整配料方案。',
                    images: [],
                    processHistory: [
                        {
                            time: '2025-07-07 08:40:22',
                            operator: '杨质量工程师',
                            status: 'processing',
                            comment: '已通知高炉车间，调整配料比例，增加低硅矿石比例。'
                        },
                        {
                            time: '2025-07-07 09:50:15',
                            operator: '杨质量工程师',
                            status: 'resolved',
                            comment: '已完成配料方案调整，新方案下试产铁水成分达标。'
                        }
                    ]
                },
                {
                    id: 19,
                    title: '转炉车间除尘风机电流波动',
                    source: '电气监控系统',
                    time: '2025-07-06 16:45:22',
                    level: 'medium',
                    status: 'pending',
                    responsible: '未分配',
                    description: '转炉车间主除尘风机电流出现周期性波动，波动范围为380-420A。可能是风机叶轮不平衡或电机问题导致。',
                    images: [],
                    processHistory: []
                },
                {
                    id: 20,
                    title: '高炉鼓风机轴承温度升高',
                    source: '设备监控系统',
                    time: '2025-07-06 15:30:18',
                    level: 'high',
                    status: 'resolved',
                    responsible: '李设备工程师',
                    description: '1号高炉鼓风机非驱动端轴承温度升至85°C，超过警戒温度80°C。可能是润滑不良或轴承损坏导致。',
                    images: [],
                    processHistory: [
                        {
                            time: '2025-07-06 15:45:30',
                            operator: '李设备工程师',
                            status: 'processing',
                            comment: '已增加轴承冷却水流量，同时检查润滑油系统。准备必要时切换至备用鼓风机。'
                        },
                        {
                            time: '2025-07-06 16:30:15',
                            operator: '李设备工程师',
                            status: 'processing',
                            comment: '发现润滑油泵出口滤网部分堵塞，导致润滑油压力不足。正在清理滤网。'
                        },
                        {
                            time: '2025-07-06 17:20:40',
                            operator: '李设备工程师',
                            status: 'resolved',
                            comment: '已完成滤网清理和润滑系统检查，轴承温度已降至正常范围。'
                        }
                    ]
                },
                {
                    id: 21,
                    title: '烧结机台车密封异常',
                    source: '生产监控系统',
                    time: '2025-07-08 16:20:35',
                    level: 'medium',
                    status: 'pending',
                    responsible: '未分配',
                    description: '3号烧结机台车密封系统出现异常，漏风率达到15%，超过正常值10%。可能影响烧结效果和能耗控制。',
                    images: [
                        'https://readdy.ai/api/search-image?query=Industrial%20sintering%20machine%20with%20visible%20air%20leakage%20from%20sealing%20system.%20The%20large%20conveyor%20belt%20system%20shows%20gaps%20in%20the%20sealing%20mechanism%20with%20dust%20and%20air%20escaping.%20The%20scene%20is%20in%20a%20steel%20plant%20sintering%20workshop%20with%20industrial%20equipment&width=400&height=300&seq=7&orientation=landscape'
                    ],
                    processHistory: []
                },
                {
                    id: 22,
                    title: '制氧站氧气纯度下降',
                    source: '公用工程监控',
                    time: '2025-07-08 16:05:18',
                    level: 'high',
                    status: 'processing',
                    responsible: '马工程师',
                    description: '制氧站产出氧气纯度降至98.2%，低于标准值99.5%。可能影响炼钢工艺质量和生产效率。',
                    images: [],
                    processHistory: [
                        {
                            time: '2025-07-08 16:15:30',
                            operator: '马工程师',
                            status: 'processing',
                            comment: '已通知制氧设备维护人员检查分子筛和精馏塔运行状况，初步判断可能是分子筛再生不完全。'
                        }
                    ]
                },
                {
                    id: 23,
                    title: '焦炉推焦车液压系统故障',
                    source: '设备监控系统',
                    time: '2025-07-08 15:45:22',
                    level: 'high',
                    status: 'pending',
                    responsible: '未分配',
                    description: '4号焦炉推焦车液压系统压力异常，当前压力为12MPa，低于正常值16MPa。可能导致推焦作业中断。',
                    images: [
                        'https://readdy.ai/api/search-image?query=Coke%20oven%20pusher%20car%20with%20hydraulic%20system%20malfunction%20in%20a%20steel%20plant.%20The%20large%20industrial%20machine%20shows%20hydraulic%20cylinders%20and%20mechanical%20components%20for%20pushing%20coke%20from%20ovens.%20The%20scene%20is%20in%20a%20coking%20plant%20with%20high%20temperature%20industrial%20environment&width=400&height=300&seq=8&orientation=landscape'
                    ],
                    processHistory: []
                },
                {
                    id: 24,
                    title: '冷轧机组润滑油温度异常',
                    source: '设备监控系统',
                    time: '2025-07-08 15:30:45',
                    level: 'medium',
                    status: 'processing',
                    responsible: '田机械师',
                    description: '冷轧机组主传动润滑油温度升至65°C，超过正常运行温度55°C。可能影响设备运行稳定性和产品质量。',
                    images: [],
                    processHistory: [
                        {
                            time: '2025-07-08 15:45:18',
                            operator: '田机械师',
                            status: 'processing',
                            comment: '已降低轧制速度，增加冷却水流量。同时检查润滑油循环系统和冷却器运行状况。'
                        }
                    ]
                },
                {
                    id: 25,
                    title: '球团竖炉风压波动',
                    source: '生产监控系统',
                    time: '2025-07-08 15:15:30',
                    level: 'low',
                    status: 'resolved',
                    responsible: '何工艺师',
                    description: '球团竖炉鼓风压力出现波动，波动范围为0.8-1.2kPa，影响球团焙烧均匀性。',
                    images: [],
                    processHistory: [
                        {
                            time: '2025-07-08 15:30:22',
                            operator: '何工艺师',
                            status: 'processing',
                            comment: '已调整鼓风机运行参数，检查风管系统是否有泄漏。'
                        },
                        {
                            time: '2025-07-08 16:10:15',
                            operator: '何工艺师',
                            status: 'resolved',
                            comment: '发现风管连接处密封不良，已完成维修，风压恢复稳定。'
                        }
                    ]
                },
                {
                    id: 26,
                    title: '电炉变压器冷却系统异常',
                    source: '电气监控系统',
                    time: '2025-07-08 14:50:18',
                    level: 'high',
                    status: 'processing',
                    responsible: '白电气工程师',
                    description: '电炉主变压器冷却系统循环泵故障，冷却效果下降，变压器温度持续上升至70°C。',
                    images: [],
                    processHistory: [
                        {
                            time: '2025-07-08 15:05:30',
                            operator: '白电气工程师',
                            status: 'processing',
                            comment: '已启动备用冷却泵，同时安排维修人员检查主泵故障原因。必要时考虑降低电炉负荷。'
                        }
                    ]
                },
                {
                    id: 27,
                    title: '高炉炉料分布异常',
                    source: '生产监控系统',
                    time: '2025-07-08 14:25:40',
                    level: 'medium',
                    status: 'pending',
                    responsible: '未分配',
                    description: '2号高炉炉料分布不均，边缘区域料面高度比中心区域低15cm，可能影响炉况稳定性。',
                    images: [],
                    processHistory: []
                },
                {
                    id: 28,
                    title: '转炉倾动机构油压不稳',
                    source: '设备监控系统',
                    time: '2025-07-08 14:10:25',
                    level: 'medium',
                    status: 'processing',
                    responsible: '史机械工程师',
                    description: '1号转炉倾动机构液压系统压力不稳定，波动范围为18-22MPa，可能影响转炉倾动精度。',
                    images: [],
                    processHistory: [
                        {
                            time: '2025-07-08 14:25:18',
                            operator: '史机械工程师',
                            status: 'processing',
                            comment: '已检查液压泵和蓄能器运行状况，初步判断可能是压力调节阀故障。正在准备更换备件。'
                        }
                    ]
                },
                {
                    id: 29,
                    title: '煤气柜水封高度异常',
                    source: '能源管控中心',
                    time: '2025-07-08 13:55:15',
                    level: 'low',
                    status: 'resolved',
                    responsible: '邓能源工程师',
                    description: '高炉煤气柜水封高度降至1.2m，低于安全值1.5m。可能存在安全隐患，需及时补充水封。',
                    images: [],
                    processHistory: [
                        {
                            time: '2025-07-08 14:10:30',
                            operator: '邓能源工程师',
                            status: 'processing',
                            comment: '已启动补水系统，同时检查水封是否有泄漏点。'
                        },
                        {
                            time: '2025-07-08 14:40:22',
                            operator: '邓能源工程师',
                            status: 'resolved',
                            comment: '已完成水封补充，水位恢复至正常范围。检查发现是蒸发损失导致，已调整补水频率。'
                        }
                    ]
                },
                {
                    id: 30,
                    title: '精炼炉电极升降异常',
                    source: '设备监控系统',
                    time: '2025-07-08 13:40:30',
                    level: 'high',
                    status: 'pending',
                    responsible: '未分配',
                    description: '精炼炉2号电极升降机构响应缓慢，升降速度比正常值慢30%。可能影响精炼工艺控制精度。',
                    images: [
                        'https://readdy.ai/api/search-image?query=Electric%20arc%20furnace%20electrode%20lifting%20mechanism%20in%20a%20steel%20refining%20ladle.%20The%20large%20graphite%20electrodes%20are%20visible%20with%20hydraulic%20lifting%20systems%20and%20control%20mechanisms.%20The%20scene%20shows%20industrial%20steelmaking%20equipment%20in%20a%20refining%20station&width=400&height=300&seq=9&orientation=landscape'
                    ],
                    processHistory: []
                }
            ]
        };
    },
    computed: {
        // 计算总预警数
        totalAlerts() {
            return this.filteredAlerts.length;
        },
        // 计算总页数
        totalPages() {
            return Math.ceil(this.totalAlerts / this.pageSize);
        },
        // 筛选后的预警
        filteredAlerts() {
            let result = [...this.alerts];
            // 应用筛选条件
            if (this.filters.level) {
                result = result.filter(alert => alert.level === this.filters.level);
            }
            if (this.filters.status) {
                result = result.filter(alert => alert.status === this.filters.status);
            }
            if (this.filters.startDate && this.filters.endDate) {
                const start = new Date(this.filters.startDate);
                const end = new Date(this.filters.endDate);
                end.setHours(23, 59, 59); // 设置为当天结束时间
                result = result.filter(alert => {
                    const alertDate = new Date(alert.time);
                    return alertDate >= start && alertDate <= end;
                });
            } else if (this.filters.startDate) {
                const start = new Date(this.filters.startDate);
                result = result.filter(alert => new Date(alert.time) >= start);
            } else if (this.filters.endDate) {
                const end = new Date(this.filters.endDate);
                end.setHours(23, 59, 59);
                result = result.filter(alert => new Date(alert.time) <= end);
            }
            if (this.filters.keyword) {
                const keyword = this.filters.keyword.toLowerCase();
                result = result.filter(alert =>
                    alert.title.toLowerCase().includes(keyword) ||
                    (alert.description && alert.description.toLowerCase().includes(keyword))
                );
            }
            // 应用排序
            if (this.sortOption === 'latest') {
                result.sort((a, b) => new Date(b.time) - new Date(a.time));
            } else if (this.sortOption === 'level') {
                const levelOrder = { high: 0, medium: 1, low: 2 };
                result.sort((a, b) => {
                    // 先按级别排序
                    const levelDiff = levelOrder[a.level] - levelOrder[b.level];
                    // 级别相同时按时间排序
                    return levelDiff !== 0 ? levelDiff : new Date(b.time) - new Date(a.time);
                });
            }
            return result;
        },
        // 当前页显示的预警
        displayedAlerts() {
            const start = (this.currentPage - 1) * this.pageSize;
            const end = start + this.pageSize;
            return this.filteredAlerts.slice(start, end);
        },
        // 显示的页码
        displayedPages() {
            const pages = [];
            const maxPagesToShow = 5;
            if (this.totalPages <= maxPagesToShow) {
                // 总页数少于要显示的页数，显示所有页
                for (let i = 1; i <= this.totalPages; i++) {
                    pages.push(i);
                }
            } else {
                // 总页数多于要显示的页数，需要计算显示哪些页
                let startPage = Math.max(1, this.currentPage - Math.floor(maxPagesToShow / 2));
                let endPage = startPage + maxPagesToShow - 1;
                if (endPage > this.totalPages) {
                    endPage = this.totalPages;
                    startPage = Math.max(1, endPage - maxPagesToShow + 1);
                }
                for (let i = startPage; i <= endPage; i++) {
                    pages.push(i);
                }
            }
            return pages;
        }
    },
    mounted() {
        this.updateCurrentTime();
        setInterval(this.updateCurrentTime, 1000);
        // 设置默认日期范围为最近一年
        const today = new Date();
        const lastYear = new Date();
        lastYear.setFullYear(today.getFullYear() - 1);
        this.filters.endDate = this.formatDate(today);
        this.filters.startDate = this.formatDate(lastYear);
    },
    beforeDestroy() {
        clearInterval(this.timeInterval);
    },
    methods: {
        toggleMenu(index) {
            this.mainMenus[index].expanded = !this.mainMenus[index].expanded;
            // 如果展开了菜单，则将其他菜单收起
            if (this.mainMenus[index].expanded) {
                this.mainMenus.forEach((menu, i) => {
                    if (i !== index) {
                        menu.expanded = false;
                    }
                });
            }
        },
        selectSubmenu(menuIndex, submenuIndex) {
            // 重置所有菜单的激活状态
            this.mainMenus.forEach(menu => {
                menu.active = false;
                menu.subMenus.forEach(submenu => {
                    submenu.active = false;
                });
            });
            // 设置当前选中的菜单和子菜单为激活状态
            this.mainMenus[menuIndex].active = true;
            this.mainMenus[menuIndex].subMenus[submenuIndex].active = true;
            const link = this.mainMenus[menuIndex].subMenus[submenuIndex].link;
            if (link) {
                const dest = link.startsWith('/') ? link : `/${link}`;
                this.$router.push(dest);
            }
        },
        updateCurrentTime() {
            const now = new Date();
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            this.currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
        },
        formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        // 获取预警级别的样式类
        getLevelClass(level) {
            switch (level) {
                case 'high':
                    return 'bg-red-100 text-red-800';
                case 'medium':
                    return 'bg-yellow-100 text-yellow-800';
                case 'low':
                    return 'bg-blue-100 text-blue-800';
                default:
                    return 'bg-gray-100 text-gray-800';
            }
        },
        // 获取预警级别的文本
        getLevelText(level) {
            switch (level) {
                case 'high':
                    return '高危';
                case 'medium':
                    return '中危';
                case 'low':
                    return '低危';
                default:
                    return '未知';
            }
        },
        // 获取处理状态的样式类
        getStatusClass(status) {
            switch (status) {
                case 'pending':
                    return 'bg-red-100 text-red-800';
                case 'processing':
                    return 'bg-yellow-100 text-yellow-800';
                case 'resolved':
                    return 'bg-green-100 text-green-800';
                default:
                    return 'bg-gray-100 text-gray-800';
            }
        },
        // 获取处理状态的文本
        getStatusText(status) {
            switch (status) {
                case 'pending':
                    return '未处理';
                case 'processing':
                    return '处理中';
                case 'resolved':
                    return '已处理';
                default:
                    return '未知';
            }
        },
        // 分页方法
        updatePagination() {
            // 切换每页显示数量时，重置当前页为第一页
            this.currentPage = 1;
        },
        prevPage() {
            if (this.currentPage > 1) {
                this.currentPage--;
            }
        },
        nextPage() {
            if (this.currentPage < this.totalPages) {
                this.currentPage++;
            }
        },
        goToPage(page) {
            this.currentPage = page;
        },
        // 筛选方法
        applyFilters() {
            // 应用筛选时重置到第一页
            this.currentPage = 1;
        },
        resetFilters() {
            this.filters = {
                level: '',
                startDate: this.formatDate(new Date(new Date().setDate(new Date().getDate() - 7))),
                endDate: this.formatDate(new Date()),
                status: '',
                keyword: ''
            };
            this.sortOption = 'latest';
            this.currentPage = 1;
        },
        // 查看详情
        viewDetail(alert) {
            this.selectedAlert = { ...alert };
            this.showDetailModal = true;
        },
        // 处理预警
        handleAlert(alert) {
            this.selectedAlert = { ...alert };
            this.processForm = {
                status: 'processing',
                comment: ''
            };
            this.showProcessModal = true;
        },
        // 从详情页处理预警
        handleFromDetail() {
            this.showDetailModal = false;
            this.processForm = {
                status: 'processing',
                comment: ''
            };
            this.showProcessModal = true;
        },
        // 提交处理
        submitProcess() {
            // 获取当前时间
            const now = new Date();
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');
            const currentTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            // 创建处理记录
            const processRecord = {
                time: currentTime,
                operator: '管理员',
                status: this.processForm.status,
                comment: this.processForm.comment || '无备注'
            };
            // 更新预警状态
            const alertIndex = this.alerts.findIndex(a => a.id === this.selectedAlert.id);
            if (alertIndex !== -1) {
                // 更新状态
                this.alerts[alertIndex].status = this.processForm.status;
                // 添加处理记录
                if (!this.alerts[alertIndex].processHistory) {
                    this.alerts[alertIndex].processHistory = [];
                }
                this.alerts[alertIndex].processHistory.push(processRecord);
                // 如果未分配责任人，则分配给当前用户
                if (!this.alerts[alertIndex].responsible || this.alerts[alertIndex].responsible === '未分配') {
                    this.alerts[alertIndex].responsible = '管理员';
                }
            }
            // 关闭弹窗
            this.showProcessModal = false;
        }
    }
};
</script>
<style scoped>
/* 隐藏input number的箭头 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* 自定义日期选择器样式 */
input[type="date"] {
    position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

/* 表格样式优化 */
table {
    border-collapse: separate;
    border-spacing: 0;
}

th {
    position: sticky;
    top: 0;
    z-index: 1;
}

/* 禁用状态样式 */
button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 预警级别标签样式 */
.bg-red-100 {
    background-color: #fee2e2;
}

.bg-yellow-100 {
    background-color: #fef3c7;
}

.bg-blue-100 {
    background-color: #dbeafe;
}

.bg-green-100 {
    background-color: #d1fae5;
}

.text-red-800 {
    color: #991b1b;
}

.text-yellow-800 {
    color: #92400e;
}

.text-blue-800 {
    color: #1e40af;
}

.text-green-800 {
    color: #065f46;
}
</style>